<template>
    <div>
        <div class="userInfo-box" style="display: flex;align-items: start">
            <div style="width: 80px;height: 80px;">
                <van-image
                        width="80"
                        height="80"
                        radius="80"
                        :src="Url + business.headpic"
                >
                </van-image>
            </div>
            <div class="userInfo-text">
                <div class="nickname">{{business.nickname}}</div>
                <div class="bio">{{business.bio}}</div>
            </div>
        </div>
        <div style="margin-bottom: 10px;background-color: #ffffff;padding: 10px 20px;font-size: 14px">他的作品</div>
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list
                    v-model="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    @load="onLoad"
            >
                <div v-for="item in list">
                    <div class="goods-box-box">
                        <div class="goods-box" @click="navTo(item.id)">
                            <div>
                                <van-image
                                        width="100"
                                        height="100"
                                        radius="10"
                                        :src="Url + item.image"
                                />
                            </div>
                            <div class="info">
                                <div class="title overF widthOver">{{item.title}}</div>
                                <div class="subtitle overF marGin">
                                    {{item.subtitle?item.subtitle:'无副标题'}}
                                </div>
                                <div class="s marGin">{{item.subtitle?item.subtitle:'无简介'}}</div>
                                <div class="price">￥{{item.price}}</div>
                            </div>

                        </div>
                        <div style="display: flex;align-items: center;justify-content: flex-end;">
                            <div style="width: 100px;display: flex;align-items: center;justify-content: space-between;">
                                <div style="display: flex;align-items: center;width: 50px">
                                    <template><img width="14" height="14" src="../../assets/img/thumbsUp.png"/><span style="margin-left: 3px">{{item.dianzannumber?item.dianzannumber:'点赞'}}</span></template>
                                </div>
                                <div style="margin-left: 15px;margin-top: 3px;width: 50px"><img width="14" height="14" src="../../assets/img/comment.png"/><span style="margin-left: 3px">{{item.commentnumber?item.commentnumber:'评论'}}</span></div>
                            </div>
                        </div>
                    </div>
                </div>
            </van-list>
        </van-pull-refresh>
    </div>
</template>

<script>
    export default {
        name: "BusinessInfo",
        data() {
            return {
                business: {},
                list: [],
                loading: false,
                refreshing: false,
                finished: false,
                page: 0,
            }
        },
        methods: {
            onRefresh() {
                this.finished = false;
                this.page = 0;
                this.list = [];
                this.onLoad();
            },
            onLoad() {
                let that = this;
                if (that.refreshing) {
                    that.list = [];
                    that.refreshing = false;
                }
                that.page++;
                that.request1.post1({
                    url: that.Url + "api/goods/busidetail",
                    params: {page: that.page, userid: that.$route.params.id},
                    success: function (res) {
                        if (that.page == 1) {
                            that.business = res.data.data.business;
                        }
                        console.log(res.data.data);
                        if (res.data.code == 1) {
                            if (res.data.data.list.data.length > 0) {
                                for (let i = 0; i < res.data.data.list.data.length; i++) {
                                    that.list.push(res.data.data.list.data[i]);
                                }
                                that.finished = true;
                            } else if (res.data.data.list.data.length === 0) {
                                that.finished = true;
                            }
                            this.loading = false;
                        } else {
                            alert(res.data.msg)
                        }
                    },
                    fail: function (error) {
                        alert(error.data.msg)
                    }
                });
            },
            navTo(id) {
                this.$router.push('/goods/goodsDetails/' + id);
            },
        }
    }
</script>

<style scoped>
    .userInfo-box {
        background-color: #ffffff;
        padding: 20px;
        margin: 0 5px;
        margin-bottom: 10px;
    }

    .userInfo-text {
        margin-left: 10px;
    }

    .nickname {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 10px;
    }

    .bio {
        font-size: 14px;
        color: rgb(242, 215, 183);
        width: 250px;
    }

    .goods-box-box {
        background-color: #ffffff;
        padding: 10px 15px;
        margin: 0 15px 20px 15px;
        border-radius: 10px;
        color: #333;
    }

    .goods-box {
        display: flex;
    }

    .orders-box {
        overflow: hidden;
        background-color: #ffffff;
        padding: 10px 0 10px 15px;
        margin: 0 15px 20px 15px;
        border-radius: 10px;
        color: #333;
        font-size: 13px;
    }

    .skuid {
        width: 100%;
        color: #000;
        font-size: 14px;
    }

    .info {
        margin-left: 20px;
    }

    .title {
        font-size: 15px;
        font-weight: bold;
    }

    .subtitle {
        font-size: 14px;
    }

    .marGin {
        margin: 5px 0;
    }

    .widthOver {
        width: 190px;
    }

    .overF {
        width: 190px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .s {
        color: #999;
    }

    .price {
        display: flex;
        margin-top: 10px;
        justify-content: start;
        color: rgba(255, 93, 49, 0.87);
    }
</style>